<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>订单详情</title>
  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>
</head>
<body>
<h2>订单详情</h2>

<div id="app">
  订单编号： {{myorder.orderNumber}} <br>
  商品名称： {{myorder.dishName}} <br>
  商品原价： {{myorder.dishPrice}} 元<br>
  商品图片： {{myorder.dishImg}} <br>
  <img :src="myorder.dishImg" />
  优惠价格： {{myorder.couponPrice}} 元<br>
  订单价格： {{myorder.orderPrice}} 元<br>
  下订单时间： {{myorder.orderCreateTime}} <br>
</div>
<script>
  new Vue({
    el:"#app",
    data:{
      myorder:{
        orderId:"",
        orderNumber:"",
        dishId:"",
        dishName:"",
        dishImg:"",
        dishPrice:"",
        orderPrice:"",
        couponName:"",
        couponPrice:"",
        mycouponId:"",
        orderCreateTime:""
      }
    },
    mounted(){
      this.getByOrderId()
    },

    methods:{
      // 查询菜品详情
      getByOrderId(){
        //1. 获得 URL后面的id 值
        const  urlParams = new URLSearchParams(window.location.search)
        const id = urlParams.get("id")
        console.log("id = " + id)
        //2. 调用后端 查询菜品详情
        var url = "myorder/"+id
        axios.get(url).then(response=>{
          if(response.data.code == 200) {
            console.log(response.data.data)
            this.myorder = response.data.data;
          }else{
            console.log(response.data.data)
          }
        }).catch(error=>{
          console.log(error)
        })

      },
    }
  })

</script>
</body>
</html>